<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="#" type="image/png">

<title>Blog list</title>
<link href="${URL}admin/css/style.css" rel="stylesheet">
<link href="${URL}admin/css/style-responsive.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="${URL}admin/js/html5shiv.js"></script>
<script src="${URL}admin/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="sticky-header">
<section>
    <#include "header.ftl">
        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                Blog List <small>Subtext for header</small>
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Extra Pages</a>
                </li>
                <li class="active">Blog List </li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row blog">
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-body">
                            <input type="text" placeholder="Search Blog" class="form-control blog-search">
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="blog-post">
                                <h3>Latest Blog Post</h3>
                                <div class="media">
                                    <a href="javascript:;" class="pull-left">
                                        <img alt="" src="${URL}admin/images/blog/blog-thumb-1.jpg" class=" ">
                                    </a>
                                    <div class="media-body">
                                        <h5 class="media-heading"><a href="javascript:;">02 May 2013 </a></h5>
                                        <p>
                                            Donec id elit non mi porta gravida at eget metus amet int
                                        </p>
                                    </div>
                                </div>
                                <div class="media">
                                    <a href="javascript:;" class="pull-left">
                                        <img alt="" src="${URL}admin/images/blog/blog-thumb-2.jpg" class=" ">
                                    </a>
                                    <div class="media-body">
                                        <h5 class="media-heading"><a href="javascript:;">02 May 2013 </a></h5>
                                        <p>
                                            Donec id elit non mi porta gravida at eget metus amet int
                                        </p>
                                    </div>
                                </div>
                                <div class="media">
                                    <a href="javascript:;" class="pull-left">
                                        <img alt="" src="${URL}admin/images/blog/blog-thumb-3.jpg" class=" ">
                                    </a>
                                    <div class="media-body">
                                        <h5 class="media-heading"><a href="javascript:;">02 May 2013 </a></h5>
                                        <p>
                                            Donec id elit non mi porta gravida at eget metus amet int
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="blog-post">
                                <h3>recent comments</h3>
                                <ul>
                                    <li><a href="javascript:;"><i class="  fa fa-comments-o"></i> admin on Vestiblulum quis dolor </a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-comments-o"></i> admin on Nam sed arcu tellus</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-comments-o"></i> monster002 on Fringilla ut vel ipsum </a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-comments-o"></i> admin on Vestiblulum quis dolor sit</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="blog-post">
                                <h3>category</h3>
                                <ul>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> Animals</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> Landscape</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> Portait</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> Wild Life</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> Video</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="blog-post">
                                <h3>blog archive</h3>
                                <ul>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> May 2013</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> April 2013</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> March 2013</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> February 2013</a></li>
                                    <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> January 2013</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="panel">
                        <div class="panel-body">
                            <h1 class="text-center mtop35"><a href="#">Neque porro quisquam est qui dolo rem ipsum quio</a></h1>
                            <p class="text-center auth-row">
                                By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                            </p>
                            <div class="blog-img-wide">
                                <img src="${URL}admin/images/blog/blog-wide-img.jpg" alt="">
                            </div>
                            <p>Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci.
                            </p>
                            <a href="#" class="more">Continue Reading</a>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="blog-img-wide">
                                <img src="${URL}admin/images/blog/blog-wide-img.jpg" alt="">
                            </div>
                            <h1 class=""><a href="#">Neque porro quisquam est qui dolo rem ipsum quio</a></h1>
                            <p class=" auth-row">
                                By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                            </p>

                            <p>Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci.
                            </p>
                            <a href="#" class="more">Continue Reading</a>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="blog-img-sm">
                                        <img src="${URL}admin/images/blog/blog-sm-img.jpg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <h1 class=""><a href="#">Neque porro quisquam est qui dolo</a></h1>
                                    <p class=" auth-row">
                                        By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                                    </p>

                                    <p>Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci.
                                    </p>
                                    <a href="#" class="more">Continue Reading</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body text-center">
                            <h1 class="mtop35"><a href="#">Neque porro quisquam est qui dolo rem ipsum quio</a></h1>
                            <p class=" auth-row">
                                By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                            </p>
                            <p class="">Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci.
                            </p>
                            <a href="#" class="more mbot20">Continue Reading</a>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body text-center">
                            <i class="fa fa-quote-left"></i>
                            <h1 class="">Proin sit amet sapien euismod, pretium ligula quis, tempus dui. Nam varius arcu id elit tristique consequat.</h1>
                            <p class=" auth-row">
                                <em> Anthony Jones</em>
                            </p>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <h1 class="mtop35"><a href="#">Neque porro quisquam est qui dolo rem ipsum quio</a></h1>
                            <p class=" auth-row">
                                By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                            </p>
                            <p class="">Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci.
                            </p>
                            <a href="#" class="more mbot20">Continue Reading</a>
                        </div>
                    </div>

                    <div class="panel">
                        <div class="panel-body">
                            <div id="c-slide" class="carousel slide auto">
                                <ol class="carousel-indicators out">
                                    <li class="active" data-slide-to="0" data-target="#c-slide"></li>
                                    <li class="" data-slide-to="1" data-target="#c-slide"></li>
                                    <li class="" data-slide-to="2" data-target="#c-slide"></li>
                                </ol>
                                <div class="carousel-inner blog-img-wide">
                                    <div class="item text-center active">
                                        <img src="${URL}admin/images/blog/image2.jpg" alt="">
                                    </div>
                                    <div class="item text-center">
                                        <img src="${URL}admin/images/blog/image3.jpg" alt="">
                                    </div>
                                    <div class="item text-center">
                                        <img src="${URL}admin/images/blog/blog-wide-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>

                            <h1 class=""><a href="#">Neque porro quisquam est qui dolo rem ipsum quio</a></h1>
                            <p class=" auth-row">
                                By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                            </p>

                        </div>
                    </div>

                    <div class="panel">
                        <div class="panel-body">
                            <p class="">
                                <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/53814789&amp;color=ff5500&amp;auto_play=false&amp;show_artwork=true"></iframe>
                            </p>
                            <h1 class=""><a href="#">Neque porro quisquam est qui dolo rem ipsum quio</a></h1>
                            <p class=" auth-row">
                                By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                            </p>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <p class="">
                                <iframe width="560" height="315" src="//www.youtube.com/embed/lq_BVyou38s" frameborder="0" allowfullscreen></iframe>
                            </p>
                            <h1 class=""><a href="#">Neque porro quisquam est qui dolo rem ipsum quio</a></h1>
                            <p class=" auth-row">
                                By <a href="#">Anthony Jones</a>   |   27 December 2014   | <a href="#">5 Comments</a>
                            </p>
                        </div>
                    </div>
                    <div class="text-center">
                        <ul class="pagination blog-pagination">
                            <li><a href="#">PREV</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">NEXT</a></li>
                        </ul>

                    </div>
                </div>

            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer class="">
            2014 &copy; AdminEx by ThemeBucket
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="${URL}admin/js/jquery-1.10.2.min.js"></script>
<script src="${URL}admin/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${URL}admin/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${URL}admin/js/bootstrap.min.js"></script>
<script src="${URL}admin/js/modernizr.min.js"></script>
<script src="${URL}admin/js/jquery.nicescroll.js"></script>
<!--common scripts for all pages-->
<script src="${URL}admin/js/scripts.js"></script>
</body>
</html>
